<template>
    <div class="delivery-lists">
        <el-card class="!border-none" shadow="never">
            <el-alert
                type="warning"
                title="温馨提示： 启用快递发货后，买家下单可以选择快递发货，由卖家安排快递送货上门，允许自定义修改名称，修改之后，移动端商城将显示修改后的名称"
                :closable="false"
                :show-icon="true"
            />
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large" :data="delivery.lists" row-key="id">
                <el-table-column property="expressName" label="配送方式" max-width="266" />
                <el-table-column label="自定义名称" min-width="100">
                    <template #default="{ row }">
                        <popover-input
                            class="flex cursor-pointer"
                            :value="row.expressName"
                            @confirm="deliveryName($event)"
                        >
                            {{ row.expressName }}
                            <el-button type="primary" link>
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                            </el-button>
                        </popover-input>
                    </template>
                </el-table-column>
                <el-table-column property="address" label="状态" max-width="220">
                    <template #default="{ row }">
                        <el-switch
                            v-perms="['deliver:config:setDeliverConfig']"
                            v-model="row.expressIs"
                            :active-value="1"
                            :inactive-value="0"
                            @change="handleSetKey"
                            :disabled="true"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="280" fixed="right">
                    <template #default>
                        <el-button type="primary" :link="true">
                            <router-link
                                :to="{
                                    path: getRoutePath(
                                        'deliver:tpl:list'
                                    )
                                }"
                            >
                                运费模版
                            </router-link>
                        </el-button>
                        <el-button type="primary" :link="true">
                            <router-link
                                :to="{
                                    path: getRoutePath(
                                        'deliver:express:list'
                                    )
                                }"
                            >
                                快递公司
                            </router-link>
                        </el-button>
                        <el-button
                            type="primary"
                            :link="true"
                            @click="handleAdd"
                        >
                            物流接口
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <edit-popup v-if="showEdit" ref="editRef" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="delivery">
import { getDelivery, deliverySet } from '@/api/setting/delivery'
import type { DeliveryFormType } from '@/api/setting/delivery'
import { getRoutePath } from '@/router'

import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref<boolean>(false)

const delivery = reactive({
    lists: [{ expressIs: 1, expressAlias: '配送方式', expressName: '配送方式' }] as DeliveryFormType[]
})

const getData = async () => {
    try {
        const data = await getDelivery()
        delivery.lists[0] = data
    } catch (error) {
        console.log('获取配送方式失败', error)
    }
}

const deliveryName = (value: string) => {
    delivery.lists[0].expressName = value
    handleSetKey()
}

const handleSetKey = async () => {
    try {
        await deliverySet({ ...delivery.lists[0] })
        await getData()
    } catch (error) {
        await getData()
    }
}

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open()
}

getData()
</script>
